<template>
	<view class="box">
		<view class="search">
			<u-search shape="round" height="70rpx" :showAction="false" bgColor="#F8F8F8"></u-search>
		</view>
		<view class="optios">
			<view class="optios-tabs">
				<u-tabs class="custom-tabs" lineColor="#C19C55" lineHeight="6" lineWidth="44" :active="activeTab"
					:scrollable="false" :list="list1" @change="changeTab">
				</u-tabs>
			</view>
			<view class="">
				<view v-if="activeTab ==0">
					<view class="container">
						<!-- 侧边栏 -->
						<view class="sidebar">
							<view v-for="(item, index) in sidebarList" :key="index"
								:class="{ 'sidebar-item': true, 'active': activeTabs === index }"
								@click="handleSidebarClick(index)">
								{{ item }}
							</view>
						</view>

						<!-- 主内容区域 -->
						<view class="main-content">
							<!-- 内容区域 -->
							<view v-for="(tab, index) in tabs" :key="index" v-show="activeTabs === index"
								class="tab-content">
								<view class="intro-content">
									<template v-if="Array.isArray(tab.content)">
										<view class="intro-content-list" v-for="(item, itemIndex) in tab.content"
											:key="itemIndex">
											<view class="_img">
												<image :src="item.imgUrl" mode=""></image>
											</view>
											<view class="intro-content-info">
												<view class="content-info-top">
													{{ item.content }}
												</view>
												<view class="content-info-center">{{ item.time }}</view>
												<view class="content-info-bottom">
													<span class="_span">￥</span><span
														class="__span">{{ item.number }}</span><span
														class="___span">{{ item.number2 }}</span>
												</view>
											</view>
										</view>
									</template>
									<template v-else>
										<view>{{ tab.content }}</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="activeTab ==1">
					<view class="container">
						<!-- 侧边栏 -->
						<view class="sidebar">
							<view v-for="(item, index) in sidebarList2" :key="index"
								:class="{ 'sidebar-item': true, 'active': activeTabs === index }"
								@click="handleSidebarClick(index)">
								{{ item }}
							</view>
						</view>

						<!-- 主内容区域 -->
						<view class="main-content">
							<!-- 内容区域 -->
							<view v-for="(tab, index) in tabs2" :key="index" v-show="activeTabs === index"
								class="tab-content">
								<view class="intro-content"  @click="toDetails">
									<template v-if="Array.isArray(tab.content)">
										<view class="intro-content-list2" v-for="(item, itemIndex) in tab.content"
											:key="itemIndex">

											<view class="intro-content2-info">
												<view class="content-name">
													<span class="content-name_span">{{item.name}}</span><span
														class="content-name__span">{{item.call}}</span>
												</view>
												<view class="content-skilled">
													{{item.skilled}}
												</view>
												<view class="content-subscribe">
													<view class="content-subscribe-text">
														<text>{{item.yuyue}}</text>
													</view>
													<view class="content-subscribe-img">
														<image :src="item.imgUrl" mode=""></image>
													</view>
												</view>
											</view>
										</view>
									</template>
									<template v-else>
										<view>{{ tab.content }}</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				list1: [{
					name: '项目',
				}, {
					name: '医师',
				}],
				sidebarList: ['全部', '按摩', '艾灸', '耳穴', '正骨', ], // 侧边栏选项列表
				sidebarList2: ['孙老师', '锦秋', '沈正华', '鲍老师', '廖中伟', ], // 侧边栏选项列表
				tabs: [ // 选项卡内容
					{
						id: 1,
						content: [{
								id: 1,
								content: '按摩 脊柱侧弯 正骨调理',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟'
							},
							{
								id: 2,
								content: '按摩 脊柱侧弯 正骨调理',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟'
							},
							{
								id: 3,
								content: '按摩 脊柱侧弯 正骨调理',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟'
							}
						]
					},
					{
						content: '内容2'
					},
					{
						content: '内容3'
					},
					{
						content: '内容4'
					},
					{
						content: '内容5'
					}
				],
				tabs2: [ // 选项卡内容
					{
						id: 1,
						content: [{
								id: 1,
								name: '孙老师',
								imgUrl: '../../static/首页_slices/进入.png',
								skilled: '擅长：按摩、正骨、腰椎间盘突出',
								yuyue: '去预约',
								call: '主任医师'
							},
							{
								id: 2,
								name: '孙老师',
								imgUrl: '../../static/首页_slices/进入.png',
								skilled: '擅长：按摩、正骨、腰椎间盘突出',
								yuyue: '去预约',
								call: '主任医师'
							},
							{
								id: 3,
								name: '孙老师',
								imgUrl: '../../static/首页_slices/进入.png',
								skilled: '擅长：按摩、正骨、腰椎间盘突出',
								yuyue: '去预约',
								call: '主任医师'
							}
						]
					},
					{
						content: '内容2'
					},
					{
						content: '内容3'
					},
					{
						content: '内容4'
					},
					{
						content: '内容5'
					}
				],
				activeTabs: 0 // 当前选中的选项卡索引
			}
		},
		methods: {
			changeTab(index) {
				this.activeTab = index.index;
				console.log(111);
			},
			handleSidebarClick(index) {
				// 点击侧边栏选项时，切换到对应的选项卡
				this.activeTabs = index;
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/activity/details'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-tabs__wrapper__nav__line {
		width: 30px !important;
		margin-left: 13rpx !important;

	}


	.box {
		height: 100vh;

		.search {
			background-color: #FFFFFF;
			padding: 20rpx 22rpx 20rpx 24rpx;
		}

		.optios {
			width: 750rpx;
			margin-top: 16rpx;
			height: calc(100% - 132rpx);
			background-color: #FFFFFF;
		}

		.container {
			display: flex;
		}

		.sidebar {
			width: 158rpx;
			height: 860rpx;
			/* 侧边栏宽度 */
			text-align: center;
			background-color: #F8F8F8;
			font-weight: 600;
		}

		.sidebar-item {
			cursor: pointer;
			height: 122rpx;
			line-height: 122rpx;
		}

		.sidebar-item.active {
			background-color: #FFFFFF;
			/* 背景蓝色 */
			border-left: 8rpx solid #C19C55;
		}

		.main-content {
			flex: 1;
			/* 主内容区域占据剩余空间 */
		}

		.tab-content {
			.intro-content {
				width: 550rpx;
				height: 216rpx;
				background: #FFFFFF;

				.intro-content-list {
					display: flex;
					border-radius: 20rpx;
					border: 1rpx solid #F2EEEE;
					margin-top: 20rpx;
					margin-left: 20rpx;
				}

				.intro-content-list2 {
					display: flex;
					width: 534rpx;
					height: 202rpx;
					background: #F8F8F8;
					border-radius: 44rpx 44rpx 44rpx 10rpx;
					background-image: url('../../static/logo.png');
					background-repeat: no-repeat;
					background-position: right;
					margin-top: 20rpx;
					margin-left: 20rpx;

					.intro-content2-info {
						.content-name {
							margin-left: 36rpx;
							margin-top: 10rpx;

							.content-name_span {
								// width: 86rpx;
								height: 28rpx;
								font-family: AdobeHeitiStd, AdobeHeitiStd;
								font-weight: 400;
								font-size: 28rpx;
								color: #2E2E2E;
								line-height: 56rpx;
								text-align: left;
								font-style: normal;
							}

							.content-name__span {
								width: 98rpx;
								// height: 36rpx;
								background: #C19C55;
								border-radius: 14rpx 0rpx 14rpx 0rpx;
								opacity: 0.15;
								font-size: 18rpx;
								color: #000000;
								line-height: 38rpx;
								text-align: center;
								font-style: normal;
								display: inline-block;
								margin-left: 4rpx;
							}
						}

						.content-skilled {
							margin-left: 36rpx;
							margin-top: 20rpx;
							// width: 430rpx;
							height: 34rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 24rpx;
							color: #989AA2;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}

						.content-subscribe {
							margin-left: 36rpx;
							margin-top: 28rpx;
							width: 116rpx;
							height: 40rpx;
							background: #C19C55;
							border-radius: 20rpx;
							display: flex;
							line-height: 40rpx;

							.content-subscribe-text {
								width: 62rpx;
								height: 28rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #FFFFFF;
								text-align: left;
								font-style: normal;
								margin-left: 20rpx;
							}

							.content-subscribe-img {
								width: 10rpx;
								height: 20rpx;
								margin-top: 12rpx;
								margin-left: 6rpx;

								image {
									width: 10rpx;
									height: 20rpx;
								}
							}
						}
					}
				}

				._img {
					width: 172rpx;
					height: 171rpx;
					margin-top: 20rpx;
					margin-left: 22rpx;
					margin-bottom: 24rpx;

					image {
						width: 172rpx;
						height: 171rpx;
					}
				}

				.intro-content-info {
					.content-info-top {
						height: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 500;
						font-size: 28rpx;
						color: #202022;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						margin-top: 36rpx;
						margin-left: 20rpx;
					}

					.content-info-center {
						width: 100rpx;
						height: 36rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 400;
						font-size: 22rpx;
						color: #939688;
						line-height: 34rpx;
						text-align: center;
						border-radius: 6rpx;
						margin-top: 24rpx;
						margin-left: 20rpx;
						margin-bottom: 16rpx;
						background: rgba(163, 178, 111, 0.55);
					}

					.content-info-bottom {
						margin-left: 24rpx;

						._span {
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 24rpx;
							color: #C19C55;
							line-height: 38rpx;
							text-align: left;
							font-style: normal;
						}

						.__span {
							height: 62rpx;
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 40rpx;
							color: #C19C55;
							line-height: 62rpx;
							text-align: left;
							font-style: normal;
							font-weight: 600;
						}

						.___span {
							height: 24rpx;
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 24rpx;
							color: #AAAAAA;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-decoration-line: line-through;
							margin-left: 20rpx;
							display: inline-block;
						}
					}
				}
			}
		}
	}
</style>